<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development. js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.deve lopment.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <style> *{margin:0;padding:0} .app{display: flex; max-width: 740px; flex-wrap: wrap; margin-left: auto; margin-right: auto; justify-content:space-evenly; }.app img{ width:150px; height:220px; } </style>
</head>
<body>
    <div id="app">

    </div> 
    <script type="text/babel">
     class Hello extends React.Component{ 
         constructor(props){
              super(props); 
              this.state = {
                   msg:"hello world",
                    movies:[] 
                    }
                     }
                     render(){ 
                         return
                          ( 
                              <div className="app">
                                {this.state.movies.map((item,index)=>{ return ( <div className="item" key={item.id}> <img src={item.images.small}/> <p >{item.title.slice(0,6)+"..."}</p> </div> ) })} </div> ) }handleClick=()=>{ this.setState({ msg:"change", movies:[] }) }
                                componentDidMount(){ $.ajax({ url:"https://douban.uieee.com/v2/movie/in_theaters", dataType:"jsonp", type:"get", success:res=>{ this.setState({ movies:res.subjects }) } }) } }ReactDOM.render( <Hello/>, document.getElementById("app") ) </script>
</body>
</html>